<template>
    <div>
        <p class="title">登录</p>
        <van-image class="avatar" round width="6rem" height="6rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        <van-form>
            <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="onSubmit">登录</van-button>
            </div>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="onSubmit2">录</van-button>
            </div>
            
            <div class="reg">
                <div class="center" @click="toRegister">没有账号？立即注册</div>
            </div>
        </van-form>
    </div>
</template>

<script>
import { Toast } from 'vant';
import LoginSer from "@/api/login";

export default {
    name: "Login",
    data() {
        return {
            username: '',
            password: '',
        };
    },
    methods: {
        onSubmit2() {
            LoginSer.test().then(res=>{
                console.log(res)
            })
        },
        onSubmit() {
            LoginSer.login(this.username, this.password).then(res=>{
                console.log(res)
                localStorage.setItem("token",res.data.token)
                this.$router.push('/about')
            })
        },
        toRegister() {
            this.$router.push('/register')
        }
    }
}

</script>

<style scoped>
.title {
    /* border-radius: 15px; */
    size: 1px;
    height: 50px;
    line-height: 50px;
    background-color: #20a0ff;
    color: #fff;
    text-align: center;
}

.avatar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
.center {
  margin: auto;
  width: 50%;
  /* border: 3px solid green;
  padding: 20px; */
  text-align: center;
}
</style>
